<script setup lang="ts">
import localeStore from '@/store/locale'
import { storeToRefs } from 'pinia'
const { localeInfo} = storeToRefs(localeStore())
</script>

<template>
  <div class="home">
    <div>
      <p>{{localeInfo.homeEp.txt}}<label>{{localeInfo.homeEp.txt_0}}</label></p>
      <p><label>{{localeInfo.homeEp.txt_1}}</label>{{localeInfo.homeEp.txt1}}</p>
      <a-button type="primary">{{localeInfo.homeEp.btntxt}}</a-button>
    </div>
    <div>
      <img class="maxwidth_img" src="@/assets/img/animal/15.jpg" alt="">
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home{
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: stretch;
  padding-bottom: 30PX;
   padding-top: 10PX;
  div{
    &:nth-child(1) {
      display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 150px;
    p{
      padding:0 10px;
      font-size: 12px;
      line-height:30px;
      label{
        font-size: 12px;
        color: rgba(192,0,0);
      }
    }
      // padding: 0 20px;
    }
    &:nth-child(2) {
      width: calc(100% - 150px);
    }
    img{
      width: 100%;
      // max-width: 300PX;
      // height: 300px;
    }
  }
  p{
    font-size: 12PX;
    color: #333;
    line-height: 12PX;
  }
  ::v-deep(.ant-btn){
    margin-top: 40px;
    background-color: rgba(235,181,61,1);
    height: 30PX;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:0px 4px;
    span{
        font-size: 11PX;
        color: #333;
        font-weight: 400;
    }
  }
}
</style>
